<!--3 X 3 画面 多屏监控 -->
<template>
  <div class="main_compent-3-3">
    <div class="box_site33">
      <div v-for="item in playerPanels" class="div_site33" >
<!--        <PlayerContainer  :id="item.id"
                          :ref="item.ref"
                          :playerRef="item.playerRef"
                          :active="item.active"
                          :playParam="playParam"
                          @on-select-active = "onSelectActive"></PlayerContainer>
      -->
        <RtcWithTalkPlayer :id="item.id" :ref="item.ref" :active="item.active" :videoId = "item.playerRef" active
                           @on-select-active = "onSelectActive"
        />
      </div>
    </div>
  </div>
</template>
<script>
import PlayerContainer from "@/view/Home/Moudle/multiscreenplay/PlayerContainer";
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue'
export default {
  name: "MultiScr3X3",
  components:{PlayerContainer,RtcWithTalkPlayer},
  data(){
    return{
      activeId:-1,
      deviceData:null,
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox330',style:'border:1px solid #14edc5',playerRef:"jsPLayer330",active:true},
        {id:1,ref:'playerBox331',style:'border:1px solid #14edc5',playerRef:"jsPLayer331",active:false},
        {id:2,ref:'playerBox332',style:'border:1px solid #14edc5',playerRef:"jsPLayer332",active:false},
        {id:3,ref:'playerBox333',style:'border:1px solid #14edc5',playerRef:"jsPLayer333",active:false},
        {id:4,ref:'playerBox334',style:'border:1px solid #14edc5',playerRef:"jsPLayer334",active:false},
        {id:5,ref:'playerBox335',style:'border:1px solid #14edc5',playerRef:"jsPLayer335",active:false},
        {id:6,ref:'playerBox336',style:'border:1px solid #14edc5',playerRef:"jsPLayer336",active:false},
        {id:7,ref:'playerBox337',style:'border:1px solid #14edc5',playerRef:"jsPLayer337",active:false},
        {id:8,ref:'playerBox338',style:'border:1px solid #14edc5',playerRef:"jsPLayer338",active:false},
      ],
      playParam:{
        protocol: "ws_flv", //谷歌浏览器不能超过6个http连接
        pringLog:false,
        isDebug:false,
        isFlv:true,
        videoBuffer:0.2, //缓存时长
        videoBufferDelay:1,
        useMSE:true,//MediaSource
        useSIMD:false, //WASM(SIMD)
        useWCS:false, //Webcodec
        useSIMDMThreading:true,//启动多线程（WASM,WASM(SIMD)解码支持）
        showOperateBtns: true, // 显示网速
        forceNoOffscreen: true, //显示性能
        renderDom:"video",
        isUseWebGPU:'webgpu',//webgl
        demuxUseWorker:true,//硬解码(MediaSource，Webcodec)worker解封装
      }
    }
  },
  methods:{
    onSelectActive(active,index){
      let player=null;
      if (active === false){
        this.activeId=-1;
        for(let i in this.playerPanels){
          player=this.$refs[this.playerPanels[i].ref][0];
          player.setActive(false);
        }
      }else{
        player=this.$refs[this.playerPanels[index].ref][0];
        this.activeId=index;
        player.setActive(true);
        for(let i in this.playerPanels){
          if (parseInt(i) !== index){
            player=this.$refs[this.playerPanels[i].ref][0];
            player.setActive(false);
          }
        }
      }
/*      this.playerPanels[index].active = active;
      if (active){
        this.activeId=index;
        for(let i in this.playerPanels){
          if (parseInt(i) !== index){
            if (this.playerPanels[i].active !== false){
              this.playerPanels[i].active = false;
            }
          }
        }
      }else{
        this.activeId=-1;
      }*/
    },
    openDialog(data){
      this.deviceData = data;
      let player=null;
      if (this.activeId !== -1){
        //为何后面再加一个 [0], 还没搞懂
        player=this.$refs[this.playerPanels[this.activeId].ref][0];
        if (!player.isPlaying()){
          player.openDialog(
            data.arrt.deviceCode,
            data.arrt.channelCode,
            null,
            data.arrt.devName);
          return;
        }
      }else{
        // 没选中则一直向后找，哪个格子有空就播放
        for(let i in this.playerPanels){
          player = this.$refs[this.playerPanels[i].ref][0];
/*          console.log(">>>>>>>>>>MultiScr2X2.play: i=%o; playerContainer=%o, isPlaying=%o, ref=%o", i,
            playerContainer,playerContainer.isPlaying(),playerContainer.getRef())*/
          if (!player.isPlaying()){
            player.openDialog(
              data.arrt.deviceCode,
              data.arrt.channelCode,
              null,
              data.arrt.devName);
            return;
          }
        }
      }
    },
    /** 给父组件 播放调用 */
    play(videoUrl,deviceId,channelId){
      //选择可播放的 面板
      let playerContainer=null;
      if (this.activeId != -1){
        //为何后面再加一个 [0], 还没搞懂
        playerContainer=this.$refs[this.playerPanels[this.activeId].ref][0];
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId);
          return;
        }
      }

      // 没选中则一直向后找，哪个格子有空就播放
      for(let i in this.playerPanels){
        playerContainer = this.$refs[this.playerPanels[i].ref][0];
        if (!playerContainer.isPlaying()){
          playerContainer.play(videoUrl,deviceId,channelId)
          return;
        }
      }
    },
  },

}
</script>
<style lang="less">
.main_compent-3-3{
  width:100%;
  height:100%;
}
.box_site33 {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-wrap: wrap;

  .div_site33 {
    width: calc(100% / 3);
    height: calc(100% / 3);
    box-sizing: border-box;
  }
}
</style>
